<template>
  <view class="booking-container">
    <view class="header-section">
      <text class="page-title">我的预约</text>
    </view>
    
    <view class="booking-list">
      <view class="booking-item" v-for="booking in bookingList" :key="booking.id">
        <view class="booking-info">
          <text class="booking-course">{{ booking.courseName }}</text>
          <text class="booking-coach">教练：{{ booking.coach }}</text>
          <text class="booking-time">时间：{{ booking.time }}</text>
          <view class="booking-status" :class="getStatusClass(booking.status)">
            {{ booking.statusText }}
          </view>
        </view>
        <view class="booking-actions" v-if="booking.status === 1">
          <button class="cancel-btn" @click="cancelBooking(booking.id)">取消预约</button>
        </view>
      </view>
    </view>
    
    <view class="empty-state" v-if="bookingList.length === 0">
      <text class="empty-text">暂无预约记录</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { bookingApi } from '../../src/services/api'

// 预约列表数据
const bookingList = ref([
  {
    id: 1,
    courseName: '瑜伽课程',
    coach: '张教练',
    time: '2025-10-30 09:00-10:00',
    status: 1,
    statusText: '已预约'
  },
  {
    id: 2,
    courseName: '动感单车',
    coach: '李教练',
    time: '2025-10-30 14:00-15:00',
    status: 3,
    statusText: '已签到'
  }
])

// 页面加载时获取预约列表
onMounted(() => {
  fetchBookingList()
})

// 获取预约列表
const fetchBookingList = async () => {
  try {
    // 这里应该调用获取预约列表的API
    // const response: any = await bookingApi.getMyBookings()
    // bookingList.value = response.data
    console.log('获取预约列表')
  } catch (error) {
    console.error('获取预约列表失败:', error)
    uni.showToast({
      title: '获取预约列表失败',
      icon: 'none'
    })
  }
}

// 获取状态样式类
const getStatusClass = (status: number) => {
  switch (status) {
    case 1: return 'status-booked'
    case 2: return 'status-cancelled'
    case 3: return 'status-checked-in'
    case 4: return 'status-completed'
    default: return ''
  }
}

// 取消预约
const cancelBooking = async (id: number) => {
  uni.showModal({
    title: '提示',
    content: '确定要取消该预约吗？',
    success: async function (res) {
      if (res.confirm) {
        try {
          // 调用取消预约的API
          const response: any = await bookingApi.cancelBooking(id)
          console.log('取消预约成功:', response)
          
          uni.showToast({
            title: '已取消预约',
            icon: 'success'
          })
          
          // 更新本地数据
          const index = bookingList.value.findIndex(item => item.id === id)
          if (index !== -1) {
            bookingList.value[index].status = 2
            bookingList.value[index].statusText = '已取消'
          }
        } catch (error: any) {
          console.error('取消预约失败:', error)
          uni.showToast({
            title: error.message || '取消预约失败',
            icon: 'none'
          })
        }
      }
    }
  })
}
</script>

<style lang="scss" scoped>
.booking-container {
  min-height: 100vh;
  background-color: #FFFFFF;
  padding: 20rpx;
}

.header-section {
  background-color: #fff;
  padding: 30rpx;
  margin-bottom: 20rpx;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  
  .page-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
  }
}

.booking-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.booking-item {
  background-color: #fff;
  border-radius: 10rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.booking-info {
  flex: 1;
}

.booking-course {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
  display: block;
}

.booking-coach, .booking-time {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 10rpx;
  display: block;
}

.booking-status {
  font-size: 24rpx;
  padding: 5rpx 15rpx;
  border-radius: 20rpx;
  display: inline-block;
}

.status-booked {
  background-color: #f0e6ff;
  color: #4B0082;
}

.status-cancelled {
  background-color: #f5f5f5;
  color: #999;
}

.status-checked-in {
  background-color: #e8fff5;
  color: #00c853;
}

.status-completed {
  background-color: #f5f5f5;
  color: #999;
}

.cancel-btn {
  background-color: #ff3b30;
  color: #fff;
  border: none;
  padding: 10rpx 20rpx;
  border-radius: 10rpx;
  font-size: 24rpx;
}

.empty-state {
  text-align: center;
  padding: 100rpx 0;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
}
</style>